<template>
  <div class="tab-content">
    <ModuleSection title="资产管理" icon="fas fa-laptop">
      <ModuleMenu :items="assetMenuItems" />
    </ModuleSection>
    
    <ModuleSection title="我的资产列表" icon="fas fa-laptop">
      <ListItem 
        v-for="asset in assetList" 
        :key="asset.id"
        :title="asset.title"
        :description="asset.description"
        :icon="asset.icon"
        :bgColor="asset.bgColor"
      />
    </ModuleSection>
  </div>
</template>

<script>
import ModuleSection from '../common/ModuleSection.vue'
import ModuleMenu from '../common/ModuleMenu.vue'
import ListItem from '../common/ListItem.vue'

export default {
  name: 'AssetModule',
  components: {
    ModuleSection,
    ModuleMenu,
    ListItem
  },
  data() {
    return {
      assetMenuItems: [
        { id: 1, name: '我的资产', icon: 'fas fa-laptop', bgColor: 'bg-blue', path: '/asset/list' },
        { id: 2, name: '资产领用', icon: 'fas fa-file-invoice', bgColor: 'bg-green', path: '/asset/apply' },
        { id: 3, name: '资产处置', icon: 'fas fa-trash-alt', bgColor: 'bg-orange', path: '/asset/dispose' },
        { id: 4, name: '资产盘点', icon: 'fas fa-clipboard-list', bgColor: 'bg-purple', path: '/asset/check' },
        { id: 5, name: '资产调拨', icon: 'fas fa-exchange-alt', bgColor: 'bg-cyan', path: '/asset/transfer' },
        { id: 6, name: '资产维修', icon: 'fas fa-tools', bgColor: 'bg-yellow', path: '/asset/repair' }
      ],
      assetList: [
        { 
          id: 1, 
          title: 'Dell XPS笔记本电脑', 
          description: '资产编号: A3892, 状态: 正常使用',
          icon: 'fas fa-laptop',
          bgColor: 'bg-blue'
        },
        { 
          id: 2, 
          title: 'iPhone 13 Pro', 
          description: '资产编号: A4021, 状态: 正常使用',
          icon: 'fas fa-mobile-alt',
          bgColor: 'bg-green'
        },
        { 
          id: 3, 
          title: 'HP LaserJet打印机', 
          description: '资产编号: A2578, 状态: 维修中',
          icon: 'fas fa-print',
          bgColor: 'bg-purple'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tab-content {
  padding: 16px;
}
</style> 